<template>
  <div>
    <el-cascader ref="org1" :disabled="isEdit" v-if="flag == 'code'" filterable :options="orgTree" :props="organizationProps" v-model="organizationCode" :placeholder="placeholder" @change="change" clearable></el-cascader>
    <el-cascader ref="org2" :disabled="isEdit" v-if="flag == 'id'" filterable :options="orgTree" :props="organizationPropsId" v-model="organizationId" :placeholder="placeholder" @change="changeId" clearable></el-cascader>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
import api from '../api'
import { CONSTANT_OBJ } from '@/utils/constant'
export default {
  name: 'OrganizationCascader',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '选择机构'
    },
    flag: {
      type: String,
      default: 'code'
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      organizationCode: '',
      organizationId: '',
      organizationProps: {
        checkStrictly: true,
        emitPath: false,
        value: 'organizationCode',
        label: 'organizationName',
        children: 'childOrganizations'
      },
      organizationPropsId: {
        checkStrictly: true,
        emitPath: false,
        value: 'organizationId',
        label: 'organizationName',
        children: 'childOrganizations'
      },
      orgTree: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      api.getQueryOrgTree().then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.orgTree = data || []
        }
      })
    },
    change (val) {
      this.$emit('input', val)
    },
    changeId (val) {
      this.$emit('input', val)
    }
  },
  // computed: {
  //   ...mapState({
  //     orgTree: state => state.common.orgTree
  //   })
  // },
  watch: {
    value (val) {
      this.organizationId = val
      this.organizationCode = val
    }
  }
}
</script>
